<template>
  <div>
    <div class="loadmoreWrap" v-if="childList.length" :style="{'min-height':wrapperHeight+'px'}">
      <div class="offerList" v-for="(item, index) in childList" :key="index">
          <div class="singerBox">
            <div class="boxTitle clearfix">
              <div class="left fl">发票抬头：上海船奇物流有限公司</div>
              <div class="right fr">{{item.settleStatusName}}</div>
            </div>
            <div class="boxTitle clearfix">
              <div class="left fl">结算单号：{{item.settleId}}</div>
             <div class="date fr" style="font-size:13px;">{{item.settleDate}}</div>
            </div>
            <div class="border">
              <i class="halfLe"></i>
              <i class="halfRi"></i>
            </div>
            <div class="info">
              <div class="up clearfix">
                <div class="left fl">结算量：{{(item.totSettleWeight*1).toFixed(3)}}吨</div>
                <div class="right fr">运费总额：{{(item.totTransAmount*1).toFixed(2)}}元</div>
              </div>
              <div class="down clearfix">
                <div class="right fl">杂费总额：{{(item.totOtherAmount*1).toFixed(2)}}元</div>
                <div class="right fr">结算总额：<i>{{(item.totSettleAmount*1).toFixed(2)}}<i>元</i></i></div>
              </div>
            </div>
            <div class="clearfix dispatchBtnWrap">
              <span class="fl" @click='toDetail(item.settleId)'>查看详情</span>
              <mt-button class='btn needsclick fr' type="primary" size="large"
                         @click.native='toInvoicing(item.settleId,item.settleStatus)'
                         v-show="isShow(item.settleStatus)">{{item.settleStatus | settleStatusBtn}}
              </mt-button>
            </div>
          </div>
        </div>
    </div>
    <div v-else class="noneDataSe" :style="{'height':+noneHeight+'px','position':'relative'}"><span>暂无数据</span></div>
  </div>
</template>
<script type="text/ecmascript-6">
import ApiService from "@/services/API-servies";
import { Loadmore, Button } from "mint-ui";
export default {
  data() {
    return {
      list: [],
      wrapperHeight: 0,
      allLoaded: false,
      bottomText: "上拉加载更多...",
      topStatus: "",
      userType: "30",
      pageNo: 1, //默认分页为第一页
      pageSize: 10, //默认每页显示8条数据
      flag: false, //默认没有分页
      noneHeight:0
    };
  },
  props: ["childList"],
  mounted() {
      this.noneHeight = this.wrapperHeight = document.documentElement.clientHeight - 104;
  },
  computed: {},
  methods: {
    toDetail(settleId) {
        this.$router.push({path: 'settlementDetail', query: {settleId: settleId}})
      },
      toInvoicing(settleId, _status) {
        this.$router.push({path: 'invoicing', query: {settleId: settleId}})
      },
    isShow(val) {
        if (val == 35 || val == 60) {
          return true;
        }
        return false;
      },
  },
  filters: {
    settleStatusBtn(val) {
      if (val == 30) {
        return "发票上传";
      } else if (val == 50) {
        return "发票上传";
      } else if (val == 35 || val == 40) {
        return "发票上传";
      }
    }
  },
  components: {
    MtLoadmore: Loadmore,
    MtButton: Button
  },
  watch: {
  }
};
</script>
<style scoped lang="less" type="stylesheet/less">
@import "~common/less/variable";
.main-body {
  height: 1200px;
}
.loadmoreWrap{
  background: #f0f0f0;
}
.noneDataSe{
  text-align: center;
  background: #fff;
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 240px;
    height: 220px;
    padding-top: 240px;
    background: url(~common/imgs/fach.jpg) no-repeat 50% 0;
    background-size: 240px 220px;
  }
}
</style>
